<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="copyright" content="方运江 42550564@qq.com">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<style>
	.buttons { width: 100%; display: flex; flex-direction: row; justify-content: space-around; align-items: center; margin-bottom: 30px; font-size: 18px;}
	.button { height: 30px; }
	.scoreContainer { text-align: center; padding-left: 20px; padding-right: 20px; }
	#score { color: red; }
	#time { margin-right: 10px; }
	#container { display: flex; flex-wrap: wrap; justify-content: center; font-size: 18px; }
	.item { display: flex; flex-direction: row; margin-right: 10px; margin-left: 10px; margin-bottom: 30px;}
	.val { color: gray; width: 30px; text-align: center; }
	.oper { color: green; margin-left: 4px; margin-right: 4px; text-align: center; }
	.input { width: 50px; font-size: 18px;  }
	#setting { position: absolute; top: 50px; right: 80px; background: white; padding: 30px; border-radius: 10px; border: 1px solid; visibility: hidden; }
	</style>
</head>
<body>
	<div class="buttons">
		<input class="button" type=button value="交卷" onclick="submit()" />
		<div class="scoreContainer"><span id="time"></span>第<span id="times">0</span>次交卷<span id="score">0分</span></div>
		<input id="reset" class="button" type=button value="继续" onclick="reset()" />
	</div>
	<div id="setting">
		题型：<input id="oper0" type="checkbox" checked />加
		<input id="oper1" type="checkbox" checked />减
		<input id="oper2" type="checkbox" checked />乘
		<input id="oper3" type="checkbox" checked />除
		<br>
		<br>
		题量：<input id="count" type="tel" value="100" />
		<br>
		<br>
		最小值：<input id="min" type="tel" value="9" />
		<br>
		最大值：<input id="max" type="tel" value="1" />
	</div>
	<div id="container"></div>
	<script>
	let list = [];
	let opers = [];
	let times = 0;
	let time = 0;
	let score = 0;
	let count = 100;
	let min = 1;
	let max = 9;
	let resetCount = 0;
	function $(id) {
		return document.getElementById(id);
	}
	function random(lower, upper) {
		return lower + Math.floor(Math.random() * (upper - lower + 1));
	}
	function dateFormat(fmt, date) {
		let ret;
		const opt = {
			"Y+": date.getFullYear().toString(),        // 年
			"m+": (date.getMonth() + 1).toString(),     // 月
			"d+": date.getDate().toString(),            // 日
			"H+": date.getHours().toString(),           // 时
			"M+": date.getMinutes().toString(),         // 分
			"S+": date.getSeconds().toString()          // 秒
			// 有其他格式化字符需求可以继续添加，必须转化成字符串
		};
		for (let k in opt) {
			ret = new RegExp("(" + k + ")").exec(fmt);
			if (ret) {
				fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
			};
		};
		return fmt;
	}
	function init() {
		count = +(localStorage.getItem('MATH_COUNT')) || 100;
		min = +(localStorage.getItem('MATH_MIN')) || 1;
		max = +(localStorage.getItem('MATH_MAX')) || 9;
		opers = JSON.parse(localStorage.getItem('MATH_OPERS')||'[0, 1, 2, 3]');
		list = JSON.parse(localStorage.getItem('MATH_LIST')||'[]');
		times = +(localStorage.getItem('MATH_TIMES')) || 0;
		time = +(localStorage.getItem('MATH_TIME')) || Date.now();
		if (list.length === 0) {
			for (let i=0; i<count; i++) {
				const oper = opers[random(0, opers.length-1)];
				let num1 = random(min, max);
				let num2 = random(min, max);
				if (oper === 1) {
					num1 = num1 + num2;
				} else if (oper === 3) {
					num1 = num1 * num2;
				}
				list.push({ num1, num2, oper, value: oper === 0 ? num1+num2 : oper === 1 ? num1-num2 : oper === 2 ? num1*num2 : num1/num2, result: '' });
			}
			localStorage.setItem('MATH_LIST', JSON.stringify(list));
		}
	}
	function showHtml() {
		const html = list.map((o, i)=>`<div class="item"><span class="val">${o.num1}</span><span class="oper">${['+', '-', 'x', '/' ][o.oper]}</span><span class="val">${o.num2}</span><span class="oper">=</span><input class="input" type="tel" id="result${i}" onchange="onChangeHandle(${i}, this)" value="${o.result}" /></div>`).join('');
		$('container').innerHTML = html;
		$('time').innerHTML = dateFormat("mm-dd HH:MM", new Date(time));
	}
	function onChangeHandle(index, el) {
		list[index].result = el.value;
		localStorage.setItem('MATH_LIST', JSON.stringify(list));
	}
	function submit(force) {
		score = 0;
		for (let i=0; i<count; i++) {
			const item = list[i];
			if (item.result == item.value) {
				const el =  $(`result${i}`);
				el.readOnly="readonly";
				el.style.color = "green";
				score++;
			}
		}
		if (force !== true) {
			times++;
			localStorage.setItem('MATH_TIMES', times);
		}
		$('times').innerHTML = times;
		$('score').innerHTML = `${Math.round(score*100/(count))}分`;
	}
	function reset() {
		if ($('reset').value === '继续') {
			if (score !== count) {
				resetCount++;
				if (resetCount > 2) {
					resetCount = 0;
				} else {
					return alert('先做100分才能下一次测验，强制执行请重复点击');
				}
			}
			$('oper0').checked = opers.indexOf(0) !== -1;
			$('oper1').checked = opers.indexOf(1) !== -1;
			$('oper2').checked = opers.indexOf(2) !== -1;
			$('oper3').checked = opers.indexOf(3) !== -1;
			$('count').value = count;
			$('max').value = max;
			$('min').value = min;
			$('setting').style.visibility = 'visible';
			$('reset').value = '确定';
		} else {
			opers = [];
			$('oper0').checked && opers.push(0);
			$('oper1').checked && opers.push(1);
			$('oper2').checked && opers.push(2);
			$('oper3').checked && opers.push(3);
			localStorage.setItem('MATH_OPERS', JSON.stringify(opers));
			count = +($('count').value) || 100;
			if (count < 0 || count > 1000) {
				count = 100;
			}
			localStorage.setItem('MATH_COUNT', count);
			min = +($('min').value) || 1;
			max = +($('max').value) || 1;
			if (max < 0 || max > 99) {
				max = 9;
			}
			if (min < 0 || min > max) {
				min = 1;
			}
			localStorage.setItem('MATH_MIN', min);
			localStorage.setItem('MATH_MAX', max);
			list = [];
			times = 0;
			time = Date.now();
			localStorage.setItem('MATH_LIST', JSON.stringify(list));
			localStorage.setItem('MATH_TIMES', times);
			localStorage.setItem('MATH_TIME', time);
			$('reset').value = '继续';
			$('setting').style.visibility = 'hidden';
			init();
			showHtml();
			$('times').innerHTML = times;
			$('score').innerHTML = `${Math.round(score*100/(count))}分`;
		}
	}
	init();
	showHtml();
	submit(true);
	</script>
</body>
</html>
